import { Button, Form, Input, message, Modal, Space, Table } from 'antd'
import { useAntdTable } from 'ahooks'
import { useForm } from 'antd/es/form/Form'
import { Role } from '../../../types/api'
import type { ColumnsType } from 'antd/es/table'
import api from '../../../api/roleApi'
import { formatDate } from '../../../utils'
import CreateRole from './createRole'
import { IAction } from '../../../types/modal'
import { useRef } from 'react'
import SetPermission from './setPermission'
import SearchForm from '../../../components/SearchForm'
export default function RoleList() {
  const [form] = useForm()

  const roleRef = useRef<{
    open: (type: IAction, data?: Role.RoleItem) => void
  }>()
  const permissionRef = useRef<{
    open: (type: IAction, data?: Role.RoleItem) => void
  }>()
  const getTableData = async ({ current, pageSize }: { current: number; pageSize: number }, formData: Role.Params) => {
    const data = await api.getRoleList({
      ...formData,
      pageNum: current,
      pageSize: pageSize
    })
    return {
      total: data.page.total,
      list: data.list
    }
  }
  const { tableProps, search } = useAntdTable(getTableData, {
    form,
    defaultPageSize: 10
  })
  //创建角色
  const handleCreate = () => {
    roleRef.current?.open('create')
  }
  //编辑角色
  const handleEdit = (record: Role.RoleItem) => {
    roleRef.current?.open('edit', record)
  }
  //设置权限
  const handleSetPermission = (record: Role.RoleItem) => {
    permissionRef.current?.open('edit', record)
  }
  //删除角色
  const handleDel = (id: string) => {
    Modal.confirm({
      title: '删除确认',
      content: <span>确认删除该角色吗?</span>,
      onOk: () => {
        handleDeptDelSubmit(id)
      }
    })
  }
  const handleDeptDelSubmit = async (_id: string) => {
    await api.delRole({
      _id
    })
    message.success('删除成功')
    search.submit()
  }
  const columns: ColumnsType<Role.RoleItem> = [
    {
      title: '角色名称',
      dataIndex: 'roleName',
      key: 'roleName'
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark'
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
      key: 'updateTime',
      render(updateTime: string) {
        return formatDate(updateTime)
      }
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      render(createTime: string) {
        return formatDate(createTime)
      }
    },
    {
      title: '操作',
      dataIndex: 'action', //如果该列为空，下方render的第一个value可以省略
      key: 'action',
      render(value, record) {
        console.log('record', value, record)
        return (
          <Space>
            <Button type='primary' onClick={() => handleEdit(record)}>
              编辑
            </Button>
            <Button type='primary' onClick={() => handleSetPermission(record)}>
              设置权限
            </Button>
            <Button type='primary' danger onClick={() => handleDel(record._id)}>
              删除
            </Button>
          </Space>
        )
      }
    }
  ]
  return (
    <div>
      <Form className='search-form' layout='inline' form={form} initialValues={{ state: 1 }}>
        <SearchForm form={form} submit={search.submit} reset={search.reset}>
          <Form.Item name='roleName' label='角色名称'>
            <Input placeholder='请输入角色名称' />
          </Form.Item>
        </SearchForm>
      </Form>
      <div className='base-table'>
        <div className='header-wrapper'>
          <div className='title'>角色列表</div>
          <div className='action'>
            <Button type='primary' onClick={handleCreate}>
              新增
            </Button>
          </div>
        </div>
      </div>
      <Table bordered rowKey='_id' columns={columns} {...tableProps} />
      <CreateRole mRef={roleRef} update={search.submit} />
      <SetPermission mRef={permissionRef} update={search.submit} />
    </div>
  )
}
